<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<script type="text/javascript" src="../js/jquery-validation-1.10.0/lib/jquery-1.7.2.js"></script>
		<link type="text/css" rel="stylesheet" href="../css/reg.css">
		<script type="text/javascript">    
	  
		
		
		function changeValidateCode(obj) {      
	/*** 
	  *   获取当前的时间作为参数，无具体意义    
	  *   每次请求需要一个不同的参数，否则可能会返回同样的验证码     
	  *   这和浏览器的缓存机制有关系，也可以把页面设置为不缓存，这样就不用这个参数了。   
	  */  
	var timenow = new Date().getTime();      
	obj.src="<%=path%>/user/random!execute.action?d="+timenow;     
	}      
	
		function checkUserAccount(){
		var userAccount=$("#account").val();
		var testAccount=/[\u4e00-\u9fa5a-zA-Z0-9\-]{4,20}/;
		if(($.trim(userAccount))==""){
			$("#userAccountSpan").html("<font color='red'>请输入用户名</font>");
			alert("cpkfalse");
			return false;
		}else if(!testAccount.test(userAccount)){
			$("#userAccountSpan").html("<font color='red'>请输入正确的用户名</font>");
			alert("cpffalse");
			return false;
		}else{
			var flag=false;
			
			$.ajax({
  			type: "POST",
   			url: "<%=path%>/user/user!checkUserAccount.action",
   			async:false,
   			data: "userAccount="+userAccount,
   			success:function(txt){
   				
   				if($.parseJSON(txt).flag=="success"){
   					
   					$("#userAccountSpan").html("<font color='red'>用户名可以用</font>");
   					flag=true;
   					
				}else{
					$("#userAccountSpan").html("<font color='red'>用户名已被占用</font>");
					
					flag= false;
				}
			}
				});
				
				return flag;
			}
		 }
	
	
	
		function CharMode(iN){  
			if (iN>=48 && iN <=57) //数字  
			return 1;  
			if (iN>=65 && iN <=90) //大写  
			return 2;  
			if (iN>=97 && iN <=122) //小写  
			return 4;  
			else  
			return 8;   
		}  
			//bitTotal函数  
			//计算密码模式  
		function bitTotal(num){  
			modes=0;  
		for (i=0;i<4;i++){  
		if (num & 1) modes++;  
			num>>>=1;  
		}  
			return modes;  
		}  
		//返回强度级别  
		function checkStrong(sPW){  
		if (sPW.length<=6)  
		return 0; //密码太短  
		Modes=0;  
		for (i=0;i<sPW.length;i++){  
		//密码模式  
		Modes|=CharMode(sPW.charCodeAt(i));  
	}  
		return bitTotal(Modes);  
	}  
  
//显示颜色  
	function pwStrength(pwd){  
		O_color="#eeeeee";  
		L_color="#FF0000";  
		M_color="#FF9900";  
		H_color="#33CC00";  
	if (pwd==null||pwd==''){  
		Lcolor=Mcolor=Hcolor=O_color;  
	}  
	else{  
		S_level=checkStrong(pwd);  
		switch(S_level) {  
		case 0:  
		Lcolor=Mcolor=Hcolor=O_color;  
		case 1:  
		Lcolor=L_color;  
		Mcolor=Hcolor=O_color;  
		break;  
		case 2:  
		Lcolor=Mcolor=M_color;  
		Hcolor=O_color;  
		break;  
		default:  
		Lcolor=Mcolor=Hcolor=H_color;  
	}  
	}  
		document.getElementById("strength_L").style.background=Lcolor;  
		document.getElementById("strength_M").style.background=Mcolor;  
		document.getElementById("strength_H").style.background=Hcolor;  
		return;  
	}  
	
	function checkPassWord(){
		checkTwicePassWord();
		var testPassword=/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~\_]{6,20}$/;
		if($.trim($("#password").val())==""){
		
			$("#passwordSpan").html("<font color='red'>请输入密码</font>");
			
			return false;
		}else if(testPassword.test($.trim($("#password").val()))){
			$("#passwordSpan").html("<font color='red'>密码可以使用</font>");
			return true;
		}else{
			$("#passwordSpan").html("<font color='red'>请输入正确格式的密码</font>");
			
			return false;
		}
		
	}
	
	function checkTwicePassWord(){
	
		var password1=$.trim($("#password").val());
		var password2=$.trim($("#password2").val());
		if(password1==password2){
		$("#passwordSpan2").html("<font color='red'>两次密码一致</font>");
		return true;
		}else{
		$("#passwordSpan2").html("<font color='red'>两次密码不一致</font>");
		
		return false;
		}
	}
	function checkName(){
		var name=$.trim($("#name").val());
		if(name==""){
		$("#nameSpan").html("<font color='red'>请输入姓名</font>");
		
		return false;
		}else{
		$("#nameSpan").html("");
		return true;
		}
	}
	
	function checkAnswer(){
		var answer=$.trim($("#answer").val());
		if(answer==""){
		$("#answerSpan").html("<font color='red'>请输入答案</font>");
		
		return false;
		}else{
		$("#answerSpan").html("");
		return true;
		}
	}
	function checkCode(){
		var flag=false;
		alert("123");
		var code=$.trim($("#code").val());
		$.ajax({
  			type: "POST",
   			url: "<%=path%>/user/user!checkCode.action",
   			async:false,
   			data: "code="+code,
   			success:function(txt){
   				
   				if($.parseJSON(txt).flag=="success"){
   					
   					$("#codeSpan").html("<font color='red'>验证码正确</font>");
   					flag= true;
   					
				}else{
					$("#codeSpan").html("<font color='red'>验证码错误</font>");
					
					flag= false;
				}
			}
				});
		return flag;
	}
	function formCommit(){
		
		if(checkUserAccount()&&checkPassWord()&&checkTwicePassWord()&&checkName()&&checkAnswer()&&checkCode()){
			$("#registerForm").submit();
		}else{
		alert("///////");
		return;
		}
	}
		</script>

		<title>注册新用户</title>
	</head>
	<body>

		<iframe frameboder="0" scrolling="no" width="100%" height="35"
			src="../frame/head.jsp"></iframe>

		<div id="center">
			<div class=SitePath>
				您的位置：
				<a href=http://www.dxses.cn target=_parent>大学生二手网</a>>
				<a href=/reg.asp>会员注册</a>
			</div>



			<table width="780px" border="0" cellspacing="0" cellpadding="0"
				align="center" class=Table>
				<tr>
					<td valign=top>
						<form name="myform" method="post" id="registerForm"
							action="<%=path%>/user/user!register.action">
							<table width="90%" border="0" cellspacing="0" cellpadding="5"
								align="center">


								<input name="User" type="hidden" value="" />
								<input name="Action" type="hidden" value="Reg" />

								<tr>
									<td colspan=2 height="20px" Class=Remark style="color: #002CAD">
										<img src="../imgs/icon_04.gif" align=absmiddle>
										<strong>填写您的会员信息，这是您在大学生二手网的身份证。</strong>
									</td>
								</tr>
								<tr>
									<td class=RegTD>


										<table width="100%" border="0" cellspacing="5" cellpadding="0"
											align="center">


											<tr>
												<td height="40px" align=right>
													<strong>登录用户名 </strong>
												</td>
												<td width="29%">
													<input id="account" name="user.userAccount" class="input2"
														style="width: 200px" type="text" maxlength=20
														onblur="checkUserAccount()" />
												</td>
												<td width="54%" class=Remark>
													<span id="userAccountSpan">4-20 字符(中文,数字,字母和下划线)</span>
												</td>
											</tr>
											<tr>
												<td height="40px" align=right>
													<strong>密 码 </strong>
												</td>
												<td>
													<input name="user.password" type="password" class="input2" id="password"
														style="width: 200px" maxlength=20
														onKeyUp="pwStrength(this.value)"
														onChange="checkPassWord()">
													<table width="204px" border="0" cellspacing="0"
														cellpadding="0">
														<tr align="center" bgcolor="#eeeeee">
															<td width="68px" height=5px id="strength_L"></td>
															<td width="68px" id="strength_M"></td>
															<td width="68px" id="strength_H"></td>
														</tr>
													</table>
												</td>
												<td class=Remark>
													<span id="passwordSpan">5-20 字符，注意区分大小写，且不能与用户名相同</span>
												</td>
											</tr>
											<tr>
												<td height="40px" align=right>
													<strong>再次输入密码 </strong>
												</td>
												<td>
													<input name="mkSurePassword" type="password" id="password2" class="input2"
														style="width: 200px" maxlength=20
														onChange="checkTwicePassWord()" />
												</td>
												<td class=Remark>
													<span id="passwordSpan2">再次确认您的密码。</span>
												</td>
											</tr>
											<tr>
												<td height="40px" align=right>
													<strong>真实姓名 </strong>
												</td>
												<td width="29%">
													<input name="user.name"  id="name" class="input2" style="width: 200px"
														type="text" onChange="checkName()" maxlength=20 />
												</td>
												<td class=Remark>
													<span id="nameSpan">请尽量输入您的真实姓名 </span>
												</td>
											</tr>
											<tr>
												<td height="40px" align=right>
													<strong>性别</strong>
												</td>
												<td>
													<input name="user.sex" type="radio" value="1"
														checked="checked" class="radio" />
													男孩
													<input name="user.sex" type="radio" value="0" class="radio" />
													女孩

												</td>
											</tr>
											<tr>
												<td height="40px" align=right>
													<strong>学 院 </strong>
												</td>
												<td width="29%">
													<input name="user.college" class="input2"
														style="width: 200px" type="text" maxlength=20 />
												</td>
											</tr>
											<tr>
												<td height="40px" align=right>
													<strong>专 业</strong>
												</td>
												<td width="29%">
													<input name="user.specialty" class="input2"
														style="width: 200px" type="text" maxlength=20 />
												</td>
											</tr>
											<tr>
												<td height="40px" align=right>
													<strong>年 级 </strong>
												</td>
												<td width="29%">
													<input name="user.grade" class="input2"
														style="width: 200px" type="text" maxlength=20 />
												</td>
											</tr>


											<tr>
												<td height="40px" align=right valign=top>
													<strong>密码提示问题 </strong>
												</td>
												<td>
													<SELECT size=1 name="user.question"
														onChange="document.myform.Question.value=this.options[this.selectedIndex].value;rQuestion(this.options[this.selectedIndex].value)"
														style="margin-top: 5px">
														<OPTION value="">
															从这里选择问题
														</OPTION>
														<OPTION value="你在哪所中学读初中？">
															你在哪所中学读初中？
														</OPTION>
														<OPTION value="你的宠物叫什么名字？">
															你的宠物叫什么名字？
														</OPTION>
														<OPTION value="你最喜欢的音乐是？">
															你最喜欢的音乐是？
														</OPTION>
														<OPTION value="你最喜欢的球队是？">
															你最喜欢的球队是？
														</OPTION>
														<OPTION value="你最喜欢的书是？">
															你最喜欢的书是？
														</OPTION>
														<OPTION value="你最好的朋友是？">
															你最好的朋友是？
														</OPTION>
														<OPTION value="你的出生年月是？">
															你的出生年月是？
														</OPTION>
														<OPTION value="你爱人的名字是？">
															你爱人的名字是？
														</OPTION>
														<OPTION value="你父亲的名字是？">
															你父亲的名字是？
														</OPTION>
														<OPTION value="你母亲的名字是？">
															你母亲的名字是？
														</OPTION>
													</SELECT>
												</td>
												<td class=Remark>
													<span id=Question1>万一您忘记了密码，可以通过“提示问题”和“答案”找回</span>
												</td>
											</tr>
											<tr>
												<td height="40px" align=right>
													<strong>密码提示答案 </strong>
												</td>
												<td>
													<input name="user.answer" type="text" id="answer" class="input2"
														style="width: 200px" maxlength="50"
														onblur="checkAnswer()" />
												</td>
												<td class=Remark>
													<span id="answerSpan"></span>
												</td>
											</tr>

											<tr>
												<td height="40px" align=right>
													<strong>验证码 </strong>
												</td>
												<td>
													<input id="code" name=Code size=8 maxlength=6
														class="input2" onblur="checkCode()" />
													<img id=imgurl align=absmiddle style='cursor: pointer'
														src="<%=path%>/user/random!execute.action"
														onclick="changeValidateCode(this)" title="点击图片刷新验证码"
														/ alt="" height="30" width="100" />
												</td>
												<td class=Remark>
													<span id=Code1>点击图片刷新验证码</span><span id="codeSpan"></span>
												</td>
											</tr>
										</table>

										<!--=======================-->
									</td>
								</tr>



								<tr>
									<td colspan=2 height=80 align=center>
										<img src="../imgs/reg.gif" onClick="formCommit();"
											style="cursor: pointer">
									</td>
								</tr>

							</table>
						</form>
					</td>
				</tr>

			</table>

		</div>
		<iframe frameboder="0" scrolling="no" width="100%" height="60"
			src="../frame/bottom.jsp"></iframe>



	</body>
</html>